<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!-- - #笔记要求

##笔记
- 每日边看视频边记录笔记，然后每个知识点需要自己解释一下
- 以及 每日未解决的问题可以记录下来
- 记录每日完成多少代码量（多少行）
- 今天做了什么
有做项目的话，项目的进度 -->
.container {
    display:grid;     
    grid-template-columns: 100px;
    grid-template-rows: 100px 100px;
    grid-template-areas属性用于定义区域grid-template-areas：'a b c'
                                                            'd e f'
                                                            'g h i'
    }
    上面代码先划分出9个单元格，然后将其定名为a到i的九各区域，分别对应这九个单元格
    
    多个单元格合并区域的写法如下
    grid-template-areas: 'a a a'
                         'b b b'
                         'c c c';
    上面代码将9个单元格分成a,b,c三个分区
    
    某些区域不需要利用，用点（.）表示
    grid-template-areas：'a . c'
                         'd . f'
                         'g . i';(点表示没有用到该单元格或该单元不属于任何区域 )
    grid-auto-flow属性表示先列后行